<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 灰鲸商城</title>
    <!-- 外部资源 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="../static/img/huijing_mall1.ico" type="image/x-icon">
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409eff',
                        success: '#67c23a',
                        warning: '#e6a23c',
                        danger: '#f56c6c',
                        dark: '#1d2129',
                        light: '#f5f7fa'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .profile-card {
                @apply bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow duration-300;
            }
            .nav-item {
                @apply flex items-center py-3 px-4 rounded-lg cursor-pointer transition-colors duration-200;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium border-l-4 border-primary;
            }
            .stat-card {
                @apply bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition-all duration-300 transform hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
<div id="app">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- 品牌标志 -->
                <div class="flex items-center">
                    <a href="/" class="text-2xl font-bold text-primary flex items-center">
                        <i class="fas fa-whale mr-2"></i>
                        <span>灰鲸商城</span>
                    </a>
                </div>

                <!-- 搜索栏 - 仅在桌面显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input
                                type="text"
                                placeholder="搜索商品..."
                                class="w-full py-2 px-4 pr-10 rounded-full border focus:outline-none focus:ring-2 focus:ring-primary/50"
                        >
                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-1 md:space-x-4">
                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100 relative" title="购物车" @click="goToCart">
                        <i class="fas fa-shopping-cart text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-warning text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                                {{ cartCount }}
                            </span>
                    </button>

                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100" title="消息">
                        <i class="fas fa-bell text-lg"></i>
                    </button>

                    <div class="relative group">
                        <button class="flex items-center space-x-1 p-1 rounded-full hover:bg-gray-100">
                            <img
                                    :src="user.avatar || defaultAvatar"
                                    alt="用户头像"
                                    class="w-8 h-8 rounded-full object-cover border border-gray-200"
                            >
                            <span class="hidden md:inline font-medium">{{ user.nickname || '登录/注册' }}</span>
                            <i class="fas fa-chevron-down text-xs opacity-70"></i>
                        </button>

                        <!-- 用户菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10 hidden group-hover:block transition-all">
                            <a href="/profile.html" class="block px-4 py-2 text-sm hover:bg-gray-100 bg-primary/5 text-primary">
                                <i class="fas fa-user mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-heart mr-2"></i>我的收藏
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-box mr-2"></i>我的订单
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <button @click="logout" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 侧边栏导航 -->
            <div class="lg:col-span-1">
                <div class="profile-card sticky top-24">
                    <!-- 用户信息 -->
                    <div class="flex flex-col items-center mb-6 pb-6 border-b">
                        <div class="relative mb-3">
                            <img
                                    :src="user.avatar || defaultAvatar"
                                    alt="用户头像"
                                    class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md"
                            >
                            <button class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors">
                                <i class="fas fa-camera text-xs"></i>
                            </button>
                        </div>
                        <h3 class="text-xl font-bold">{{ user.nickname || '未登录' }}</h3>
                        <p class="text-gray-500 text-sm mt-1">{{ user.level || '普通会员' }}</p>

                        <div class="flex items-center mt-4 space-x-4">
                            <div class="text-center">
                                <div class="font-bold">{{ user.ordersCount || 0 }}</div>
                                <div class="text-xs text-gray-500">订单</div>
                            </div>
                            <div class="text-center">
                                <div class="font-bold">{{ user.favoritesCount || 0 }}</div>
                                <div class="text-xs text-gray-500">收藏</div>
                            </div>
                            <div class="text-center">
                                <div class="font-bold">{{ user.points || 0 }}</div>
                                <div class="text-xs text-gray-500">积分</div>
                            </div>
                        </div>
                    </div>

                    <!-- 导航菜单 -->
                    <nav>
                        <ul class="space-y-1">
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'overview' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'overview'"
                                >
                                    <i class="fas fa-tachometer-alt w-5 text-center mr-3"></i>
                                    <span>个人总览</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'orders' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'orders'"
                                >
                                    <i class="fas fa-box w-5 text-center mr-3"></i>
                                    <span>我的订单</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'favorites' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'favorites'"
                                >
                                    <i class="fas fa-heart w-5 text-center mr-3"></i>
                                    <span>我的收藏</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'addresses' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'addresses'"
                                >
                                    <i class="fas fa-map-marker-alt w-5 text-center mr-3"></i>
                                    <span>收货地址</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'profile' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'profile'"
                                >
                                    <i class="fas fa-user-edit w-5 text-center mr-3"></i>
                                    <span>个人资料</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'security' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'security'"
                                >
                                    <i class="fas fa-shield-alt w-5 text-center mr-3"></i>
                                    <span>账户安全</span>
                                </a>
                            </li>
                            <li>
                                <a
                                        class="nav-item"
                                        :class="activeMenu === 'points' ? 'nav-item-active' : 'hover:bg-gray-50'"
                                        @click="activeMenu = 'points'"
                                >
                                    <i class="fas fa-star w-5 text-center mr-3"></i>
                                    <span>我的积分</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- 主内容 -->
            <div class="lg:col-span-3 space-y-8">
                <!-- 个人总览 -->
                <div v-if="activeMenu === 'overview'">
                    <h1 class="text-2xl font-bold mb-6">个人总览</h1>

                    <!-- 统计卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                        <div class="stat-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">待付款</p>
                                    <p class="text-2xl font-bold mt-1">{{ stats.pendingPayment || 0 }}</p>
                                </div>
                                <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-warning">
                                    <i class="fas fa-credit-card text-xl"></i>
                                </div>
                            </div>
                            <a href="#" class="text-primary text-sm mt-4 inline-block hover:underline">查看全部</a>
                        </div>

                        <div class="stat-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">待发货</p>
                                    <p class="text-2xl font-bold mt-1">{{ stats.pendingShipment || 0 }}</p>
                                </div>
                                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                                    <i class="fas fa-truck text-xl"></i>
                                </div>
                            </div>
                            <a href="#" class="text-primary text-sm mt-4 inline-block hover:underline">查看全部</a>
                        </div>

                        <div class="stat-card">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">待收货</p>
                                    <p class="text-2xl font-bold mt-1">{{ stats.pendingReceipt || 0 }}</p>
                                </div>
                                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-success">
                                    <i class="fas fa-box-open text-xl"></i>
                                </div>
                            </div>
                            <a href="#" class="text-primary text-sm mt-4 inline-block hover:underline">查看全部</a>
                        </div>
                    </div>

                    <!-- 最近订单 -->
                    <div class="profile-card">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold">最近订单</h2>
                            <a href="#" class="text-primary hover:underline" @click="activeMenu = 'orders'">查看全部</a>
                        </div>

                        <div v-if="recentOrders.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-file-invoice-alt text-5xl mb-3 opacity-30"></i>
                            <p>暂无订单记录</p>
                            <a href="/" class="text-primary mt-2 inline-block hover:underline">去购物</a>
                        </div>

                        <div v-else class="space-y-6">
                            <div v-for="order in recentOrders" :key="order.id" class="border rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center">
                                    <div>
                                        <span class="font-medium">订单编号: {{ order.orderNo }}</span>
                                        <span class="ml-3 text-gray-500 text-sm">{{ order.date }}</span>
                                    </div>
                                    <span :class="order.statusClass">{{ order.status }}</span>
                                </div>

                                <div class="p-4">
                                    <div class="flex">
                                        <img :src="order.productImage" alt="商品图片" class="w-20 h-20 object-cover rounded-md">
                                        <div class="ml-4 flex-1">
                                            <h4 class="font-medium">{{ order.productName }}</h4>
                                            <p class="text-gray-500 text-sm mt-1">{{ order.specs }}</p>
                                            <div class="flex justify-between items-center mt-2">
                                                <span class="text-danger font-medium">¥{{ order.price }}</span>
                                                <span class="text-gray-500">x{{ order.quantity }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex justify-between items-center mt-4 pt-4 border-t">
                                        <div class="text-gray-600">
                                            合计: <span class="font-bold text-dark">¥{{ order.totalPrice }}</span>
                                        </div>
                                        <div class="flex gap-2">
                                            <button
                                                    v-for="action in order.actions"
                                                    :key="action.name"
                                                    :class="action.btnClass"
                                                    @click="handleOrderAction(order.id, action.type)"
                                            >
                                                {{ action.name }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 收藏商品 -->
                    <div class="profile-card mt-8">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold">我的收藏</h2>
                            <a href="#" class="text-primary hover:underline" @click="activeMenu = 'favorites'">查看全部</a>
                        </div>

                        <div v-if="favoriteProducts.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-heart text-5xl mb-3 opacity-30"></i>
                            <p>暂无收藏商品</p>
                        </div>

                        <div v-else class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                            <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow" v-for="product in favoriteProducts" :key="product.id">
                                <div class="relative">
                                    <img :src="product.MainImage" :alt="product.name" class="w-full h-40 object-cover">
                                    <button
                                            class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-danger hover:bg-white transition-colors"
                                            @click.stop="removeFavorite(product.id)"
                                    >
                                        <i class="fas fa-heart"></i>
                                    </button>
                                </div>
                                <div class="p-3">
                                    <h3 class="text-sm font-medium line-clamp-2 h-12" @click="goToProductDetail(product.id)">{{ product.name }}</h3>
                                    <div class="mt-2 flex items-center">
                                        <span class="text-danger font-bold">¥{{ product.price }}</span>
                                        <span class="ml-2 text-xs text-gray-500 line-through">¥{{ product.original_price }}</span>
                                    </div>
                                    <button
                                            class="mt-3 w-full py-2 bg-primary/10 text-primary rounded-md text-sm hover:bg-primary/20 transition-colors"
                                            @click="addFavoriteToCart(product.id)"
                                    >
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我的订单 -->
                <div v-if="activeMenu === 'orders'">
                    <h1 class="text-2xl font-bold mb-6">我的订单</h1>

                    <!-- 订单筛选 -->
                    <div class="profile-card mb-6">
                        <div class="flex flex-wrap gap-2 md:gap-4">
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'all' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'all'"
                            >
                                全部订单
                            </button>
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'pendingPayment' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'pendingPayment'"
                            >
                                待付款
                            </button>
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'pendingShipment' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'pendingShipment'"
                            >
                                待发货
                            </button>
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'pendingReceipt' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'pendingReceipt'"
                            >
                                待收货
                            </button>
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'completed' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'completed'"
                            >
                                已完成
                            </button>
                            <button
                                    class="px-4 py-2 rounded-full text-sm"
                                    :class="orderFilter === 'cancelled' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                    @click="orderFilter = 'cancelled'"
                            >
                                已取消
                            </button>
                        </div>

                        <div class="mt-4 flex flex-col sm:flex-row gap-4">
                            <div class="relative flex-1">
                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input
                                        type="text"
                                        placeholder="搜索订单号"
                                        class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                        v-model="orderSearch"
                                >
                            </div>
                            <div class="flex gap-2">
                                <el-date-picker
                                        v-model="dateRange"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        size="default"
                                ></el-date-picker>
                                <button class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                                    <i class="fas fa-filter mr-1"></i> 筛选
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 订单列表 -->
                    <div class="profile-card">
                        <div v-if="filteredOrders.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-file-invoice-alt text-5xl mb-3 opacity-30"></i>
                            <p>暂无符合条件的订单</p>
                        </div>

                        <div v-else class="space-y-6">
                            <div v-for="order in filteredOrders" :key="order.id" class="border rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex justify-between items-center">
                                    <div>
                                        <span class="font-medium">订单编号: {{ order.orderNo }}</span>
                                        <span class="ml-3 text-gray-500 text-sm">{{ order.date }}</span>
                                    </div>
                                    <span :class="order.statusClass">{{ order.status }}</span>
                                </div>

                                <div class="p-4">
                                    <div v-for="item in order.items" :key="item.id" class="flex mb-4 last:mb-0">
                                        <img :src="item.image" alt="商品图片" class="w-20 h-20 object-cover rounded-md">
                                        <div class="ml-4 flex-1">
                                            <h4 class="font-medium">{{ item.name }}</h4>
                                            <p class="text-gray-500 text-sm mt-1">{{ item.specs }}</p>
                                            <div class="flex justify-between items-center mt-2">
                                                <span class="text-danger font-medium">¥{{ item.price }}</span>
                                                <span class="text-gray-500">x{{ item.quantity }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex justify-between items-center mt-4 pt-4 border-t">
                                        <div>
                                            <div class="text-gray-600">
                                                共 {{ order.items.length }} 件商品 合计:
                                                <span class="font-bold text-dark">¥{{ order.totalPrice }}</span>
                                                <span class="text-sm ml-2">(含运费 ¥{{ order.shippingFee }})</span>
                                            </div>
                                            <div class="text-gray-500 text-sm mt-1">
                                                收货地址: {{ order.addressName }} {{ order.addressPhone }} {{ order.addressDetail }}
                                            </div>
                                        </div>
                                        <div class="flex flex-col gap-2">
                                            <button
                                                    v-for="action in order.actions"
                                                    :key="action.name"
                                                    :class="action.btnClass"
                                                    @click="handleOrderAction(order.id, action.type)"
                                            >
                                                {{ action.name }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 分页 -->
                            <div class="flex justify-center mt-8">
                                <el-pagination
                                        v-model:current-page="currentPage"
                                        v-model:page-size="pageSize"
                                        :page-sizes="[5, 10, 20]"
                                        :total="filteredOrders.length"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                ></el-pagination>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我的收藏 -->
                <div v-if="activeMenu === 'favorites'">
                    <h1 class="text-2xl font-bold mb-6">我的收藏</h1>

                    <div class="profile-card">
                        <div class="flex justify-between items-center mb-6">
                            <div class="relative w-64">
                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input
                                        type="text"
                                        placeholder="搜索收藏商品"
                                        class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                        v-model="favoriteSearch"
                                >
                            </div>
                            <div>
                                <button
                                        class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 transition-colors"
                                        :class="favoriteSort === 'latest' ? 'border-primary text-primary bg-primary/5' : ''"
                                        @click="favoriteSort = 'latest'"
                                >
                                    最新收藏
                                </button>
                                <button
                                        class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 transition-colors ml-2"
                                        :class="favoriteSort === 'priceAsc' ? 'border-primary text-primary bg-primary/5' : ''"
                                        @click="favoriteSort = 'priceAsc'"
                                >
                                    价格从低到高
                                </button>
                                <button
                                        class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50 transition-colors ml-2"
                                        :class="favoriteSort === 'priceDesc' ? 'border-primary text-primary bg-primary/5' : ''"
                                        @click="favoriteSort = 'priceDesc'"
                                >
                                    价格从高到低
                                </button>
                            </div>
                        </div>

                        <div v-if="filteredFavorites.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-heart text-5xl mb-3 opacity-30"></i>
                            <p>暂无收藏商品</p>
                        </div>

                        <div v-else class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                            <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow" v-for="product in filteredFavorites" :key="product.id">
                                <div class="relative">
                                    <img :src="product.MainImage" :alt="product.name" class="w-full h-40 object-cover">
                                    <button
                                            class="absolute top-2 right-2 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-danger hover:bg-white transition-colors"
                                            @click.stop="removeFavorite(product.id)"
                                    >
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <span class="absolute top-2 left-2 bg-danger text-white text-xs px-2 py-1 rounded-md" v-if="product.discount">
                                            {{ product.discount }}折
                                        </span>
                                </div>
                                <div class="p-3">
                                    <h3 class="text-sm font-medium line-clamp-2 h-12 cursor-pointer" @click="goToProductDetail(product.id)">{{ product.name }}</h3>
                                    <div class="mt-2 flex items-center">
                                        <span class="text-danger font-bold">¥{{ product.price }}</span>
                                        <span class="ml-2 text-xs text-gray-500 line-through">¥{{ product.original_price }}</span>
                                    </div>
                                    <div class="mt-1 text-xs text-gray-500">
                                        <i class="fas fa-shopping-cart mr-1"></i>
                                        <span>{{ product.sales || 0 }}人已买</span>
                                    </div>
                                    <button
                                            class="mt-3 w-full py-2 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors"
                                            @click="addFavoriteToCart(product.id)"
                                    >
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="flex justify-center mt-8" v-if="filteredFavorites.length > 0">
                            <el-pagination
                                    v-model:current-page="favoriteCurrentPage"
                                    v-model:page-size="favoritePageSize"
                                    :page-sizes="[8, 16, 24]"
                                    :total="filteredFavorites.length"
                                    layout="total, sizes, prev, pager, next, jumper"
                            ></el-pagination>
                        </div>
                    </div>
                </div>

                <!-- 收货地址 -->
                <div v-if="activeMenu === 'addresses'">
                    <h1 class="text-2xl font-bold mb-6">收货地址</h1>

                    <div class="profile-card">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-lg font-medium">我的收货地址</h2>
                            <button
                                    class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center"
                                    @click="showAddAddressDialog = true"
                            >
                                <i class="fas fa-plus mr-2"></i> 添加新地址
                            </button>
                        </div>

                        <div v-if="addresses.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-map-marker-alt text-5xl mb-3 opacity-30"></i>
                            <p>暂无收货地址</p>
                            <button
                                    class="mt-3 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                                    @click="showAddAddressDialog = true"
                            >
                                添加第一个地址
                            </button>
                        </div>

                        <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div
                                    class="border rounded-lg p-4 hover:border-primary transition-colors relative"
                                    v-for="address in addresses"
                                    :key="address.id"
                            >
                                <div v-if="address.isDefault" class="absolute top-0 left-0 bg-primary text-white text-xs px-2 py-1 rounded-br-lg">
                                    默认地址
                                </div>

                                <div class="pt-2">
                                    <h3 class="font-medium">{{ address.name }} {{ address.phone }}</h3>
                                    <p class="text-gray-600 mt-1">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}</p>

                                    <div class="flex gap-2 mt-4">
                                        <button
                                                class="text-sm text-gray-600 hover:text-primary"
                                                @click="editAddress(address)"
                                        >
                                            <i class="fas fa-edit mr-1"></i> 编辑
                                        </button>
                                        <button
                                                class="text-sm text-gray-600 hover:text-primary"
                                                v-if="!address.isDefault"
                                                @click="setDefaultAddress(address.id)"
                                        >
                                            <i class="fas fa-check-circle mr-1"></i> 设为默认
                                        </button>
                                        <button
                                                class="text-sm text-gray-600 hover:text-danger"
                                                @click="deleteAddress(address.id)"
                                        >
                                            <i class="fas fa-trash mr-1"></i> 删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 个人资料 -->
                <div v-if="activeMenu === 'profile'">
                    <h1 class="text-2xl font-bold mb-6">个人资料</h1>

                    <div class="profile-card">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                            <div class="md:col-span-1">
                                <div class="text-center">
                                    <div class="relative inline-block mb-4">
                                        <img
                                                :src="user.avatar || defaultAvatar"
                                                alt="用户头像"
                                                class="w-32 h-32 rounded-full object-cover border-4 border-white shadow-md"
                                        >
                                        <button class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-primary/90 transition-colors">
                                            <i class="fas fa-camera text-sm"></i>
                                        </button>
                                    </div>
                                    <p class="text-gray-500 text-sm">点击更换头像</p>
                                    <p class="text-gray-500 text-xs mt-1">支持JPG、PNG格式，建议尺寸200x200px</p>
                                </div>
                            </div>

                            <div class="md:col-span-2 space-y-6">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
                                        <input
                                                type="text"
                                                v-model="userForm.username"
                                                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                        >
                                    </div>
                                    <div>
                                        <label class="block text-gray-700 text-sm font-medium mb-2">昵称</label>
                                        <input
                                                type="text"
                                                v-model="userForm.nickname"
                                                class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                        >
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-gray-700 text-sm font-medium mb-2">手机号码</label>
                                    <div class="flex">
                                        <input
                                                type="tel"
                                                v-model="userForm.phone"
                                                class="flex-1 px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                                readonly
                                        >
                                        <button class="px-4 py-2 bg-gray-100 border border-l-0 rounded-r-lg hover:bg-gray-200 transition-colors">
                                            修改
                                        </button>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-gray-700 text-sm font-medium mb-2">邮箱</label>
                                    <div class="flex">
                                        <input
                                                type="email"
                                                v-model="userForm.email"
                                                class="flex-1 px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                        >
                                        <button class="px-4 py-2 bg-gray-100 border border-l-0 rounded-r-lg hover:bg-gray-200 transition-colors">
                                            验证
                                        </button>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-gray-700 text-sm font-medium mb-2">性别</label>
                                    <div class="flex items-center space-x-4">
                                        <label class="inline-flex items-center">
                                            <input
                                                    type="radio"
                                                    name="gender"
                                                    value="male"
                                                    v-model="userForm.gender"
                                                    class="mr-2"
                                            >
                                            <span>男</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input
                                                    type="radio"
                                                    name="gender"
                                                    value="female"
                                                    v-model="userForm.gender"
                                                    class="mr-2"
                                            >
                                            <span>女</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input
                                                    type="radio"
                                                    name="gender"
                                                    value="secret"
                                                    v-model="userForm.gender"
                                                    class="mr-2"
                                            >
                                            <span>保密</span>
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-gray-700 text-sm font-medium mb-2">生日</label>
                                    <el-date-picker
                                            v-model="userForm.birthday"
                                            type="date"
                                            placeholder="选择生日"
                                            value-format="YYYY-MM-DD"
                                    ></el-date-picker>
                                </div>

                                <div>
                                    <label class="block text-gray-700 text-sm font-medium mb-2">个人简介</label>
                                    <textarea
                                            v-model="userForm.bio"
                                            rows="3"
                                            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
                                            placeholder="请输入个人简介（最多100字）"
                                            maxlength="100"
                                    ></textarea>
                                    <p class="text-right text-gray-500 text-xs mt-1">{{ userForm.bio.length }}/100</p>
                                </div>

                                <div class="flex justify-end space-x-3 pt-4">
                                    <button
                                            class="px-6 py-2 border rounded-lg hover:bg-gray-50 transition-colors"
                                            @click="resetForm"
                                    >
                                        取消
                                    </button>
                                    <button
                                            class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                                            @click="saveProfile"
                                    >
                                        保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 账户安全 -->
                <div v-if="activeMenu === 'security'">
                    <h1 class="text-2xl font-bold mb-6">账户安全</h1>

                    <div class="profile-card">
                        <div class="space-y-6">
                            <div class="flex items-center justify-between p-4 border rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4">
                                        <i class="fas fa-lock text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">登录密码</h3>
                                        <p class="text-gray-500 text-sm">保护您的账户安全，建议定期更换密码</p>
                                    </div>
                                </div>
                                <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    修改密码
                                </button>
                            </div>

                            <div class="flex items-center justify-between p-4 border rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-success mr-4">
                                        <i class="fas fa-mobile-alt text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">手机号码</h3>
                                        <p class="text-gray-500 text-sm">{{ user.phone || '未绑定' }} <span class="text-success text-xs">已验证</span></p>
                                    </div>
                                </div>
                                <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    {{ user.phone ? '更换手机' : '绑定手机' }}
                                </button>
                            </div>

                            <div class="flex items-center justify-between p-4 border rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mr-4">
                                        <i class="fas fa-envelope text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">邮箱地址</h3>
                                        <p class="text-gray-500 text-sm">{{ user.email || '未绑定' }} <span class="text-gray-400 text-xs">{{ user.email ? '未验证' : '' }}</span></p>
                                    </div>
                                </div>
                                <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    {{ user.email ? '更换邮箱' : '绑定邮箱' }}
                                </button>
                            </div>

                            <div class="flex items-center justify-between p-4 border rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center text-warning mr-4">
                                        <i class="fas fa-shield-alt text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">安全问题</h3>
                                        <p class="text-gray-500 text-sm">{{ hasSecurityQuestion ? '已设置' : '未设置' }}，用于找回密码和账户验证</p>
                                    </div>
                                </div>
                                <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    {{ hasSecurityQuestion ? '修改问题' : '设置问题' }}
                                </button>
                            </div>

                            <div class="flex items-center justify-between p-4 border rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-danger mr-4">
                                        <i class="fas fa-history text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-medium">登录记录</h3>
                                        <p class="text-gray-500 text-sm">查看最近登录记录，确保账户安全</p>
                                    </div>
                                </div>
                                <button class="px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    查看记录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我的积分 -->
                <div v-if="activeMenu === 'points'">
                    <h1 class="text-2xl font-bold mb-6">我的积分</h1>

                    <div class="profile-card mb-8">
                        <div class="text-center py-8">
                            <div class="text-4xl font-bold mb-2">{{ user.points || 0 }}</div>
                            <p class="text-gray-500">我的积分</p>
                            <div class="mt-6 flex justify-center space-x-4">
                                <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    积分兑换
                                </button>
                                <button class="px-6 py-2 border rounded-lg hover:bg-gray-50 transition-colors">
                                    积分规则
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="profile-card">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold">积分记录</h2>
                            <div class="flex gap-2">
                                <button
                                        class="px-4 py-2 rounded-full text-sm"
                                        :class="pointsFilter === 'all' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                        @click="pointsFilter = 'all'"
                                >
                                    全部
                                </button>
                                <button
                                        class="px-4 py-2 rounded-full text-sm"
                                        :class="pointsFilter === 'income' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                        @click="pointsFilter = 'income'"
                                >
                                    收入
                                </button>
                                <button
                                        class="px-4 py-2 rounded-full text-sm"
                                        :class="pointsFilter === 'expense' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                        @click="pointsFilter = 'expense'"
                                >
                                    支出
                                </button>
                            </div>
                        </div>

                        <div v-if="filteredPoints.length === 0" class="text-center py-12 text-gray-500">
                            <i class="fas fa-star text-5xl mb-3 opacity-30"></i>
                            <p>暂无积分记录</p>
                        </div>

                        <div v-else class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                <tr class="bg-gray-50">
                                    <th class="px-4 py-3 text-left text-gray-600 font-medium">积分变动</th>
                                    <th class="px-4 py-3 text-left text-gray-600 font-medium">原因</th>
                                    <th class="px-4 py-3 text-left text-gray-600 font-medium">时间</th>
                                    <th class="px-4 py-3 text-left text-gray-600 font-medium">状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="record in filteredPoints" :key="record.id" class="border-t">
                                    <td class="px-4 py-4">
                                                <span :class="record.type === 'income' ? 'text-success' : 'text-danger'">
                                                    {{ record.type === 'income' ? '+' : '-' }}{{ record.amount }}
                                                </span>
                                    </td>
                                    <td class="px-4 py-4">{{ record.reason }}</td>
                                    <td class="px-4 py-4 text-gray-500">{{ record.date }}</td>
                                    <td class="px-4 py-4">
                                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">
                                                    已完成
                                                </span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <div class="flex justify-center mt-8" v-if="filteredPoints.length > 0">
                            <el-pagination
                                    v-model:current-page="pointsCurrentPage"
                                    v-model:page-size="pointsPageSize"
                                    :page-sizes="[10, 20, 30]"
                                    :total="filteredPoints.length"
                                    layout="total, sizes, prev, pager, next, jumper"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加/编辑地址弹窗 -->
    <el-dialog
            title="收货地址"
            v-model="showAddAddressDialog"
            :before-close="handleCloseAddressDialog"
            width="500px"
    >
        <el-form
                :model="addressForm"
                ref="addressFormRef"
                :rules="addressRules"
                label-width="80px"
        >
            <el-form-item label="收货人" prop="name">
                <el-input v-model="addressForm.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="addressForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="region">
                <el-cascader
                        v-model="addressForm.region"
                        :options="regionOptions"
                        placeholder="请选择省/市/区"
                        @change="handleRegionChange"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="detail">
                <el-input v-model="addressForm.detail" placeholder="请输入详细地址，如街道、门牌号等"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="addressForm.isDefault">设为默认地址</el-checkbox>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="handleCloseAddressDialog">取消</el-button>
            <el-button type="primary" @click="saveAddress">保存</el-button>
        </template>
    </el-dialog>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">灰鲸商城</h3>
                    <p class="text-gray-400 text-sm">提供高品质的智能产品和优质的购物体验</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div>
                    <h4 class="font-medium mb-4">购物指南</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">购物流程</a></li>
                        <li><a href="#" class="hover:text-white">支付方式</a></li>
                        <li><a href="#" class="hover:text-white">配送方式</a></li>
                        <li><a href="#" class="hover:text-white">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">售后服务</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">退换货政策</a></li>
                        <li><a href="#" class="hover:text-white">保修政策</a></li>
                        <li><a href="#" class="hover:text-white">投诉建议</a></li>
                        <li><a href="#" class="hover:text-white">售后服务</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 400-123-4567</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@huijingmall.com</li>
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 北京市朝阳区科技园</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2025 灰鲸商城 版权所有</p>
            </div>
        </div>
    </footer>
</div>

<script>
    // 全局配置
    const AppConfig = {
        api: {
            userInfo: '/api/user/info',
            userOrders: '/api/user/orders',
            userFavorites: '/api/user/favorites',
            userAddresses: '/api/user/addresses',
            removeFavorite: '/api/user/favorites',
            addToCart: '/api/cart/add',
            logout: '/api/logout'
        },
        defaults: {
            defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
    };

    // 创建Vue应用
    const { createApp, ref, reactive, onMounted, computed, toRefs, getCurrentInstance } = Vue;
    const { ElMessage, ElDatePicker, ElPagination, ElDialog, ElForm, ElFormItem, ElInput, ElCheckbox, ElCascader } = ElementPlus;

    const app = createApp({
        setup() {
            // 状态管理
            const activeMenu = ref('overview'); // 默认显示个人总览
            const defaultAvatar = AppConfig.defaults.defaultAvatar;
            const user = reactive({
                id: null,
                username: '',
                nickname: '',
                avatar: '',
                phone: '',
                email: '',
                gender: 'secret',
                birthday: '',
                bio: '',
                level: '普通会员',
                points: 0,
                ordersCount: 0,
                favoritesCount: 0,
                isLoggedIn: false
            });

            // 购物车数量
            const cartCount = ref(0);

            // 用户表单数据
            const userForm = reactive({
                username: '',
                nickname: '',
                phone: '',
                email: '',
                gender: 'secret',
                birthday: '',
                bio: ''
            });

            // 订单相关状态
            const orderFilter = ref('all');
            const orderSearch = ref('');
            const dateRange = ref([]);
            const currentPage = ref(1);
            const pageSize = ref(5);
            const allOrders = ref([]);

            // 收藏相关状态
            const favoriteSearch = ref('');
            const favoriteSort = ref('latest');
            const favoriteCurrentPage = ref(1);
            const favoritePageSize = ref(8);
            const allFavorites = ref([]);

            // 地址相关状态
            const addresses = ref([]);
            const showAddAddressDialog = ref(false);
            const currentAddressId = ref(null);
            const addressForm = reactive({
                name: '',
                phone: '',
                region: [],
                province: '',
                city: '',
                district: '',
                detail: '',
                isDefault: false
            });

            // 地址验证规则
            const addressRules = {
                name: [
                    { required: true, message: '请输入收货人姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择所在地区', trigger: 'change' }
                ],
                detail: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ]
            };

            // 地区数据
            const regionOptions = ref([
                {
                    value: 'beijing',
                    label: '北京市',
                    children: [
                        {
                            value: 'haidian',
                            label: '海淀区',
                            children: [
                                { value: 'zhongguancun', label: '中关村' },
                                { value: 'wudaokou', label: '五道口' },
                                { value: 'zhichunlu', label: '知春路' }
                            ]
                        },
                        {
                            value: 'chaoyang',
                            label: '朝阳区',
                            children: [
                                { value: 'cbd', label: 'CBD' },
                                { value: 'sanlitun', label: '三里屯' },
                                { value: 'wangjing', label: '望京' }
                            ]
                        }
                    ]
                },
                {
                    value: 'shanghai',
                    label: '上海市',
                    children: [
                        {
                            value: 'pudong',
                            label: '浦东新区',
                            children: [
                                { value: 'lujiazui', label: '陆家嘴' },
                                { value: 'jinqiao', label: '金桥' }
                            ]
                        },
                        {
                            value: 'huangpu',
                            label: '黄浦区',
                            children: [
                                { value: 'nanjinglu', label: '南京路' },
                                { value: 'thebund', label: '外滩' }
                            ]
                        }
                    ]
                }
            ]);

            // 积分相关状态
            const pointsFilter = ref('all');
            const pointsCurrentPage = ref(1);
            const pointsPageSize = ref(10);
            const allPoints = ref([]);

            // 其他状态
            const stats = reactive({
                pendingPayment: 0,
                pendingShipment: 0,
                pendingReceipt: 0
            });
            const recentOrders = ref([]);
            const favoriteProducts = ref([]);
            const hasSecurityQuestion = ref(false);
            const loading = ref(true);

            // 获取表单实例
            const { proxy } = getCurrentInstance();

            // 初始化数据
            onMounted(() => {
                // 模拟API请求
                setTimeout(() => {
                    loadUserData();
                    loadOrderData();
                    loadFavoriteData();
                    loadAddressData();
                    loadPointsData();
                    loading.value = false;
                }, 800);
            });

            // 加载用户数据
            const loadUserData = () => {
                // 模拟用户数据
                user.id = 10001;
                user.username = 'zhang_san';
                user.nickname = '张三';
                user.avatar = 'https://picsum.photos/id/1005/200/200';
                user.phone = '13800138000';
                user.email = 'zhangsan@example.com';
                user.gender = 'male';
                user.birthday = '1990-01-15';
                user.bio = '热爱生活，喜欢购物的程序员';
                user.level = '黄金会员';
                user.points = 1250;
                user.ordersCount = 28;
                user.favoritesCount = 15;
                user.isLoggedIn = true;

                // 填充表单数据
                userForm.username = user.username;
                userForm.nickname = user.nickname;
                userForm.phone = user.phone;
                userForm.email = user.email;
                userForm.gender = user.gender;
                userForm.birthday = user.birthday;
                userForm.bio = user.bio;

                // 统计数据
                stats.pendingPayment = 2;
                stats.pendingShipment = 3;
                stats.pendingReceipt = 1;

                // 购物车数量
                cartCount.value = 5;

                // 安全问题状态
                hasSecurityQuestion.value = true;
            };

            // 加载订单数据
            const loadOrderData = () => {
                // 模拟订单数据
                allOrders.value = [
                    {
                        id: 1001,
                        orderNo: 'ORD20230512001',
                        date: '2023-05-12 14:30',
                        status: '待付款',
                        statusClass: 'text-warning font-medium',
                        items: [
                            {
                                id: 10011,
                                image: 'https://picsum.photos/id/1/200/200',
                                name: '智能手表 Pro 3',
                                specs: '黑色 42mm',
                                price: 1299,
                                quantity: 1
                            }
                        ],
                        totalPrice: 1299,
                        shippingFee: 0,
                        addressName: '张三',
                        addressPhone: '13800138000',
                        addressDetail: '北京市海淀区中关村大街1号',
                        actions: [
                            { name: '去付款', type: 'pay', btnClass: 'px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90' },
                            { name: '取消订单', type: 'cancel', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' }
                        ]
                    },
                    {
                        id: 1002,
                        orderNo: 'ORD20230510002',
                        date: '2023-05-10 09:15',
                        status: '待发货',
                        statusClass: 'text-primary font-medium',
                        items: [
                            {
                                id: 10021,
                                image: 'https://picsum.photos/id/2/200/200',
                                name: '无线蓝牙耳机',
                                specs: '白色',
                                price: 799,
                                quantity: 1
                            },
                            {
                                id: 10022,
                                image: 'https://picsum.photos/id/3/200/200',
                                name: '手机保护壳',
                                specs: '透明 防摔',
                                price: 59,
                                quantity: 2
                            }
                        ],
                        totalPrice: 917,
                        shippingFee: 0,
                        addressName: '张三',
                        addressPhone: '13800138000',
                        addressDetail: '北京市海淀区中关村大街1号',
                        actions: [
                            { name: '取消订单', type: 'cancel', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' },
                            { name: '联系客服', type: 'service', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' }
                        ]
                    },
                    {
                        id: 1003,
                        orderNo: 'ORD20230508005',
                        date: '2023-05-08 20:45',
                        status: '待收货',
                        statusClass: 'text-orange-500 font-medium',
                        items: [
                            {
                                id: 10031,
                                image: 'https://picsum.photos/id/4/200/200',
                                name: '便携式充电宝 20000mAh',
                                specs: '黑色 22.5W快充',
                                price: 199,
                                quantity: 1
                            }
                        ],
                        totalPrice: 199,
                        shippingFee: 8,
                        addressName: '张三',
                        addressPhone: '13800138000',
                        addressDetail: '北京市朝阳区CBD商务中心',
                        actions: [
                            { name: '查看物流', type: 'logistics', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' },
                            { name: '确认收货', type: 'confirm', btnClass: 'px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90' }
                        ]
                    },
                    {
                        id: 1004,
                        orderNo: 'ORD20230505012',
                        date: '2023-05-05 16:20',
                        status: '已完成',
                        statusClass: 'text-success font-medium',
                        items: [
                            {
                                id: 10041,
                                image: 'https://picsum.photos/id/5/200/200',
                                name: '机械键盘 青轴',
                                specs: '黑色 87键',
                                price: 399,
                                quantity: 1
                            }
                        ],
                        totalPrice: 399,
                        shippingFee: 0,
                        addressName: '张三',
                        addressPhone: '13800138000',
                        addressDetail: '北京市海淀区中关村大街1号',
                        actions: [
                            { name: '查看详情', type: 'detail', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' },
                            { name: '申请售后', type: 'aftersale', btnClass: 'px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90' }
                        ]
                    },
                    {
                        id: 1005,
                        orderNo: 'ORD20230501008',
                        date: '2023-05-01 11:30',
                        status: '已取消',
                        statusClass: 'text-gray-500 font-medium',
                        items: [
                            {
                                id: 10051,
                                image: 'https://picsum.photos/id/6/200/200',
                                name: '智能音箱',
                                specs: '白色',
                                price: 299,
                                quantity: 1
                            }
                        ],
                        totalPrice: 299,
                        shippingFee: 0,
                        addressName: '张三',
                        addressPhone: '13800138000',
                        addressDetail: '北京市海淀区中关村大街1号',
                        actions: [
                            { name: '删除订单', type: 'delete', btnClass: 'px-4 py-2 border rounded-md hover:bg-gray-50' },
                            { name: '再次购买', type: 'rebuy', btnClass: 'px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90' }
                        ]
                    }
                ];

                // 最近订单（取前3条）
                recentOrders.value = [...allOrders.value].slice(0, 3);
            };

            // 加载收藏数据
            const loadFavoriteData = () => {
                // 模拟收藏数据
                allFavorites.value = [
                    {
                        id: 2001,
                        name: '超薄笔记本电脑 14英寸',
                        MainImage: 'https://picsum.photos/id/11/300/300',
                        price: 5999,
                        original_price: 6999,
                        discount: '8.6',
                        sales: 1256,
                        addedTime: '2023-05-10'
                    },
                    {
                        id: 2002,
                        name: '智能扫地机器人',
                        MainImage: 'https://picsum.photos/id/12/300/300',
                        price: 1899,
                        original_price: 2299,
                        discount: '8.3',
                        sales: 892,
                        addedTime: '2023-05-08'
                    },
                    {
                        id: 2003,
                        name: '高清投影仪 家用',
                        MainImage: 'https://picsum.photos/id/13/300/300',
                        price: 2499,
                        original_price: 2799,
                        discount: '8.9',
                        sales: 547,
                        addedTime: '2023-05-05'
                    },
                    {
                        id: 2004,
                        name: '空气净化器 除甲醛',
                        MainImage: 'https://picsum.photos/id/14/300/300',
                        price: 1299,
                        original_price: 1599,
                        discount: '8.1',
                        sales: 328,
                        addedTime: '2023-05-01'
                    },
                    {
                        id: 2005,
                        name: '无线充电器 15W',
                        MainImage: 'https://picsum.photos/id/15/300/300',
                        price: 89,
                        original_price: 129,
                        discount: '6.9',
                        sales: 2156,
                        addedTime: '2023-04-28'
                    },
                    {
                        id: 2006,
                        name: '智能恒温杯',
                        MainImage: 'https://picsum.photos/id/16/300/300',
                        price: 129,
                        original_price: 159,
                        discount: '8.1',
                        sales: 753,
                        addedTime: '2023-04-25'
                    }
                ];

                // 显示的收藏商品（取前4条）
                favoriteProducts.value = [...allFavorites.value].slice(0, 4);
            };

            // 加载地址数据
            const loadAddressData = () => {
                // 模拟地址数据
                addresses.value = [
                    {
                        id: 3001,
                        name: '张三',
                        phone: '13800138000',
                        province: '北京市',
                        city: '海淀区',
                        district: '中关村',
                        detail: '中关村大街1号 创新大厦B座1501室',
                        isDefault: true
                    },
                    {
                        id: 3002,
                        name: '张三',
                        phone: '13800138000',
                        province: '北京市',
                        city: '朝阳区',
                        district: 'CBD',
                        detail: '建国路88号 现代城2号楼803室',
                        isDefault: false
                    }
                ];
            };

            // 加载积分数据
            const loadPointsData = () => {
                // 模拟积分数据
                allPoints.value = [
                    {
                        id: 4001,
                        amount: 100,
                        type: 'income',
                        reason: '购物获得积分',
                        date: '2023-05-10 14:30'
                    },
                    {
                        id: 4002,
                        amount: 50,
                        type: 'income',
                        reason: '每日签到',
                        date: '2023-05-09 08:15'
                    },
                    {
                        id: 4003,
                        amount: 200,
                        type: 'income',
                        reason: '购物获得积分',
                        date: '2023-05-08 20:45'
                    },
                    {
                        id: 4004,
                        amount: 500,
                        type: 'expense',
                        reason: '积分兑换商品',
                        date: '2023-05-05 10:20'
                    },
                    {
                        id: 4005,
                        amount: 150,
                        type: 'income',
                        reason: '购物获得积分',
                        date: '2023-05-01 16:30'
                    }
                ];
            };

            // 计算过滤后的订单
            const filteredOrders = computed(() => {
                return allOrders.value.filter(order => {
                    // 状态过滤
                    if (orderFilter.value !== 'all') {
                        const statusMap = {
                            'pendingPayment': '待付款',
                            'pendingShipment': '待发货',
                            'pendingReceipt': '待收货',
                            'completed': '已完成',
                            'cancelled': '已取消'
                        };
                        if (order.status !== statusMap[orderFilter.value]) {
                            return false;
                        }
                    }

                    // 搜索过滤
                    if (orderSearch.value && !order.orderNo.includes(orderSearch.value)) {
                        return false;
                    }

                    return true;
                });
            });

            // 计算过滤和排序后的收藏
            const filteredFavorites = computed(() => {
                let result = allFavorites.value.filter(product => {
                    if (favoriteSearch.value) {
                        return product.name.includes(favoriteSearch.value);
                    }
                    return true;
                });

                // 排序
                if (favoriteSort.value === 'priceAsc') {
                    result.sort((a, b) => a.price - b.price);
                } else if (favoriteSort.value === 'priceDesc') {
                    result.sort((a, b) => b.price - a.price);
                } else { // latest
                    result.sort((a, b) => new Date(b.addedTime) - new Date(a.addedTime));
                }

                return result;
            });

            // 计算过滤后的积分记录
            const filteredPoints = computed(() => {
                return allPoints.value.filter(record => {
                    if (pointsFilter.value === 'income' && record.type !== 'income') {
                        return false;
                    }
                    if (pointsFilter.value === 'expense' && record.type !== 'expense') {
                        return false;
                    }
                    return true;
                });
            });

            // 订单分页处理
            const handleSizeChange = (val) => {
                pageSize.value = val;
                currentPage.value = 1;
            };

            const handleCurrentChange = (val) => {
                currentPage.value = val;
            };

            // 处理订单操作
            const handleOrderAction = (orderId, actionType) => {
                switch(actionType) {
                    case 'pay':
                        ElMessage.success(`订单 ${orderId} 去付款`);
                        break;
                    case 'cancel':
                        ElMessage.success(`订单 ${orderId} 已取消`);
                        // 实际应用中应更新订单状态
                        break;
                    case 'logistics':
                        ElMessage.success(`查看订单 ${orderId} 物流`);
                        break;
                    case 'confirm':
                        ElMessage.success(`订单 ${orderId} 已确认收货`);
                        break;
                    case 'detail':
                        ElMessage.success(`查看订单 ${orderId} 详情`);
                        break;
                    case 'aftersale':
                        ElMessage.success(`订单 ${orderId} 申请售后`);
                        break;
                    case 'delete':
                        ElMessage.success(`订单 ${orderId} 已删除`);
                        break;
                    case 'rebuy':
                        ElMessage.success(`再次购买订单 ${orderId} 商品`);
                        break;
                    case 'service':
                        ElMessage.success(`联系客服咨询订单 ${orderId}`);
                        break;
                }
            };

            // 移除收藏
            const removeFavorite = (productId) => {
                ElMessageBox.confirm(
                    '确定要取消收藏该商品吗？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    // 过滤掉要删除的商品
                    allFavorites.value = allFavorites.value.filter(item => item.id !== productId);
                    favoriteProducts.value = favoriteProducts.value.filter(item => item.id !== productId);
                    user.favoritesCount = allFavorites.value.length;
                    ElMessage.success('已取消收藏');
                }).catch(() => {
                    // 取消操作
                });
            };

            // 添加收藏商品到购物车
            const addFavoriteToCart = (productId) => {
                const product = allFavorites.value.find(item => item.id === productId);
                if (product) {
                    cartCount.value++;
                    ElMessage.success(`已将 ${product.name} 加入购物车`);
                }
            };

            // 编辑地址
            const editAddress = (address) => {
                currentAddressId.value = address.id;
                addressForm.name = address.name;
                addressForm.phone = address.phone;
                addressForm.detail = address.detail;
                addressForm.isDefault = address.isDefault;

                // 设置地区选择器
                const province = regionOptions.value.find(r => r.label === address.province);
                if (province) {
                    const city = province.children.find(c => c.label === address.city);
                    if (city) {
                        const district = city.children.find(d => d.label === address.district);
                        if (district) {
                            addressForm.region = [province.value, city.value, district.value];
                            addressForm.province = address.province;
                            addressForm.city = address.city;
                            addressForm.district = address.district;
                        }
                    }
                }

                showAddAddressDialog.value = true;
            };

            // 处理地区选择变化
            const handleRegionChange = (value) => {
                if (value && value.length === 3) {
                    // 查找对应的标签文本
                    const province = regionOptions.value.find(r => r.value === value[0]);
                    if (province) {
                        addressForm.province = province.label;
                        const city = province.children.find(c => c.value === value[1]);
                        if (city) {
                            addressForm.city = city.label;
                            const district = city.children.find(d => d.value === value[2]);
                            if (district) {
                                addressForm.district = district.label;
                            }
                        }
                    }
                }
            };

            // 保存地址
            const saveAddress = () => {
                proxy.$refs.addressFormRef.validate((valid) => {
                    if (valid) {
                        if (currentAddressId.value) {
                            // 编辑现有地址
                            const index = addresses.value.findIndex(item => item.id === currentAddressId.value);
                            if (index !== -1) {
                                addresses.value[index] = {
                                    ...addresses.value[index],
                                    name: addressForm.name,
                                    phone: addressForm.phone,
                                    province: addressForm.province,
                                    city: addressForm.city,
                                    district: addressForm.district,
                                    detail: addressForm.detail,
                                    isDefault: addressForm.isDefault
                                };

                                // 如果设为默认，需要取消其他地址的默认状态
                                if (addressForm.isDefault) {
                                    addresses.value = addresses.value.map(addr =>
                                        addr.id === currentAddressId.value
                                            ? addr
                                            : {...addr, isDefault: false}
                                    );
                                }

                                ElMessage.success('地址修改成功');
                            }
                        } else {
                            // 添加新地址
                            const newId = Math.max(...addresses.value.map(a => a.id), 0) + 1;
                            const newAddress = {
                                id: newId,
                                name: addressForm.name,
                                phone: addressForm.phone,
                                province: addressForm.province,
                                city: addressForm.city,
                                district: addressForm.district,
                                detail: addressForm.detail,
                                isDefault: addressForm.isDefault
                            };

                            addresses.value.push(newAddress);

                            // 如果设为默认，需要取消其他地址的默认状态
                            if (addressForm.isDefault) {
                                addresses.value = addresses.value.map(addr =>
                                    addr.id === newId ? addr : {...addr, isDefault: false}
                                );
                            }

                            ElMessage.success('新地址添加成功');
                        }

                        showAddAddressDialog.value = false;
                        resetAddressForm();
                    }
                });
            };

            // 重置地址表单
            const resetAddressForm = () => {
                addressForm.name = '';
                addressForm.phone = '';
                addressForm.region = [];
                addressForm.province = '';
                addressForm.city = '';
                addressForm.district = '';
                addressForm.detail = '';
                addressForm.isDefault = false;
                currentAddressId.value = null;
                if (proxy.$refs.addressFormRef) {
                    proxy.$refs.addressFormRef.resetFields();
                }
            };

            // 关闭地址弹窗
            const handleCloseAddressDialog = () => {
                showAddAddressDialog.value = false;
                resetAddressForm();
            };

            // 设置默认地址
            const setDefaultAddress = (addressId) => {
                addresses.value = addresses.value.map(addr =>
                    addr.id === addressId
                        ? {...addr, isDefault: true}
                        : {...addr, isDefault: false}
                );
                ElMessage.success('已设置为默认地址');
            };

            // 删除地址
            const deleteAddress = (addressId) => {
                ElMessageBox.confirm(
                    '确定要删除该地址吗？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    addresses.value = addresses.value.filter(item => item.id !== addressId);
                    ElMessage.success('地址已删除');
                }).catch(() => {
                    // 取消操作
                });
            };

            // 保存个人资料
            const saveProfile = () => {
                // 更新用户信息
                user.username = userForm.username;
                user.nickname = userForm.nickname;
                user.email = userForm.email;
                user.gender = userForm.gender;
                user.birthday = userForm.birthday;
                user.bio = userForm.bio;

                ElMessage.success('个人资料保存成功');
            };

            // 重置表单
            const resetForm = () => {
                userForm.username = user.username;
                userForm.nickname = user.nickname;
                userForm.phone = user.phone;
                userForm.email = user.email;
                userForm.gender = user.gender;
                userForm.birthday = user.birthday;
                userForm.bio = user.bio;
            };

            // 退出登录
            const logout = () => {
                ElMessageBox.confirm(
                    '确定要退出登录吗？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }
                ).then(() => {
                    // 重置用户信息
                    Object.keys(user).forEach(key => {
                        user[key] = '';
                    });
                    user.isLoggedIn = false;
                    user.gender = 'secret';
                    cartCount.value = 0;
                    ElMessage.success('已退出登录');
                }).catch(() => {
                    // 取消操作
                });
            };

            // 跳转到商品详情
            const goToProductDetail = (productId) => {
                window.location.href = `/product-detail.html?id=${productId}`;
            };

            // 跳转到购物车
            const goToCart = () => {
                window.location.href = '/cart.html';
            };

            return {
                activeMenu,
                user,
                defaultAvatar,
                userForm,
                orderFilter,
                orderSearch,
                dateRange,
                currentPage,
                pageSize,
                allOrders,
                filteredOrders,
                favoriteSearch,
                favoriteSort,
                favoriteCurrentPage,
                favoritePageSize,
                allFavorites,
                filteredFavorites,
                addresses,
                showAddAddressDialog,
                addressForm,
                addressRules,
                regionOptions,
                pointsFilter,
                pointsCurrentPage,
                pointsPageSize,
                allPoints,
                filteredPoints,
                stats,
                recentOrders,
                favoriteProducts,
                hasSecurityQuestion,
                loading,
                cartCount,

                handleSizeChange,
                handleCurrentChange,
                handleOrderAction,
                removeFavorite,
                addFavoriteToCart,
                editAddress,
                handleRegionChange,
                saveAddress,
                handleCloseAddressDialog,
                setDefaultAddress,
                deleteAddress,
                saveProfile,
                resetForm,
                logout,
                goToProductDetail,
                goToCart
            };
        }
    });

    // 全局注册Element Plus组件
    app.use(ElementPlus);

    // 挂载应用
    app.mount('#app');
</script>
</body>
</html>
